<template>
  <!-- 登录页面主容器 -->
  <view class="normal-login-container">
    <!-- 装饰性背景元素 -->
    <view class="bg-decoration">
      <text class="decoration-leaf decoration-leaf-1">🌿</text>
      <text class="decoration-leaf decoration-leaf-2">🍃</text>
      <text class="decoration-leaf decoration-leaf-3">🌿</text>
      <text class="decoration-circle decoration-circle-1"></text>
      <text class="decoration-circle decoration-circle-2"></text>
    </view>

    <!-- 应用Logo展示区域 -->
    <view class="logo-content align-center justify-center flex">
      <image :src="globalConfig.appInfo.logo" mode="aspectFit"> </image>
    </view>

    <!-- 登录方式切换选项卡 -->
    <view class="login-tabs">
      <view class="tab-list">
        <!-- 仅微信小程序环境显示微信登录选项 -->
        <!-- #ifdef MP-WEIXIN -->
        <!-- <view
          :class="['tab-item', loginType === 'wechat' ? 'active' : '']"
          @click="loginType = 'wechat'"
        >
          <text>微信快捷登录</text>
        </view> -->
        <!-- #endif -->
        <!-- 账号密码登录选项 -->
        <view
          :class="['tab-item', loginType === 'password' ? 'active' : '']"
          @click="loginType = 'password'"
        >
          <text>账号密码登录</text>
        </view>
      </view>
    </view>

    <!-- 登录表单内容区域 -->
    <view class="login-form-content">
      <!-- 账号密码登录表单 -->
      <view v-if="loginType === 'password'">
        <!-- 账号输入框 -->
        <view class="input-item flex align-center">
          <view class="iconfont icon-user icon"></view>
          <input
            v-model="loginForm.username"
            class="input"
            type="text"
            placeholder="请输入账号"
            maxlength="30"
          />
        </view>
        <!-- 密码输入框 -->
        <view class="input-item flex align-center">
          <view class="iconfont icon-password icon"></view>
          <input
            v-model="loginForm.password"
            type="password"
            class="input"
            placeholder="请输入密码"
            maxlength="20"
          />
        </view>
        <!-- 验证码输入框(仅在启用验证码时显示) -->
        <view
          class="input-item flex align-center"
          style="width: 60%; margin: 0px"
          v-if="captchaEnabled"
        >
          <view class="iconfont icon-code icon"></view>
          <input
            v-model="loginForm.code"
            type="number"
            class="input"
            placeholder="请输入验证码"
            maxlength="4"
          />
          <view class="login-code">
            <image
              :src="codeUrl"
              @click="getCode"
              class="login-code-img"
            ></image>
          </view>
        </view>
        <!-- 登录按钮 -->
        <view class="action-btn">
          <button
            @click="handleLogin"
            class="login-btn cu-btn block lg round"
            style="
              background: linear-gradient(135deg, #4caf50, #66bb6a);
              color: white;
              border: none;
            "
          >
            登录
          </button>
        </view>
      </view>

      <!-- 微信登录界面(仅微信小程序环境显示) -->
      <!-- #ifdef MP-WEIXIN -->
      <!-- <view v-if="loginType === 'wechat'" class="wechat-login-content">
        <view class="wechat-tips">
          <text class="tips-text">使用微信快捷登录</text>
          <text class="tips-desc">首次登录将自动创建账号</text>
        </view>
        <view class="wechat-icon">
          <text class="cuIcon-weixin"></text>
        </view>
        <view class="action-btn">
          <button
            class="login-btn cu-btn block bg-green lg round"
            open-type="getUserProfile"
            @tap="handleWxLogin"
          >
            <text class="cuIcon-weixin"></text> 微信一键登录
          </button>
        </view>
      </view> -->
      <!-- #endif -->
      <!-- 注册入口(仅在密码登录模式下显示) -->
      <view class="reg text-center" v-if="register && loginType === 'password'">
        <text class="text-grey1">没有账号？</text>
        <text @click="handleUserRegister" class="text-blue">立即注册</text>
      </view>
      <!-- 用户协议和隐私政策链接 -->
      <view class="xieyi text-center">
        <view class="checkbox-container" @click="agreementChecked = !agreementChecked">
          <view class="checkbox" :class="{ checked: agreementChecked }">
            <text v-if="agreementChecked" class="iconfont icon-check">✓</text>
          </view>
          <text class="text-grey1">我已阅读并同意</text>
          <text @click.stop="handleUserAgrement" class="text-blue">《用户协议》</text>
          <text @click.stop="handlePrivacy" class="text-blue">《隐私协议》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 引入登录相关的API和工具函数
import { getCodeImg } from "@/api/login"; // 获取验证码图片API
import { getToken } from "@/utils/auth"; // 获取用户Token工具函数

export default {
  data() {
    return {
      codeUrl: "", // 验证码图片URL
      captchaEnabled: true, // 是否启用验证码
      register: false, // 用户注册功能开关
      globalConfig: getApp().globalData.config, // 全局配置信息
      // #ifdef MP-WEIXIN
      // loginType: "wechat", // 微信小程序环境默认显示微信登录
      // #endif
      // #ifndef MP-WEIXIN
      // loginType: "password", // 非微信小程序环境默认显示密码登录
      // #endif
      loginType: "password", // 非微信小程序环境默认显示密码登录
      loginForm: {
        username: "", // 账号
        password: "", // 密码
        code: "", // 验证码
        uuid: "", // 验证码唯一标识
      },
      agreementChecked: false, // 协议勾选状态
    };
  },
  // 组件创建时自动获取验证码
  created() {
    this.getCode();
  },
  // 页面加载时执行
  onLoad() {
    //#ifdef H5
    // H5环境下，如果已有Token则直接跳转到首页
    // if (getToken()) {
    //   this.$tab.reLaunch("/pages/index");
    // }
    //#endif

    
    if (getToken()) {
      this.$tab.reLaunch("/pages/index");
    }
  },
  methods: {
    /**
     * 处理用户注册跳转
     */
    handleUserRegister() {
      this.$tab.redirectTo(`/pages/register`);
    },

    /**
     * 打开隐私协议页面
     */
    handlePrivacy() {
      this.$tab.navigateTo('/pages/agreement/privacy-agreement');
    },

    /**
     * 打开用户协议页面
     */
    handleUserAgrement() {
      this.$tab.navigateTo('/pages/agreement/user-agreement');
    },

    /**
     * 获取图形验证码
     */
    getCode() {
      getCodeImg().then((res) => {
        this.captchaEnabled = 
          res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },

    /**
     * 账号密码登录主方法
     * 进行表单验证并触发登录流程
     */
    async handleLogin() {
      // 表单验证
      if (this.loginForm.username === "") {
        this.$modal.msgError("请输入账号");
      } else if (this.loginForm.password === "") {
        this.$modal.msgError("请输入密码");
      } else if (this.loginForm.code === "" && this.captchaEnabled) {
        this.$modal.msgError("请输入验证码");
      } else if (!this.agreementChecked) {
        this.$modal.msgError("请阅读并同意用户协议和隐私协议");
      } else {
        this.$modal.loading("登录中，请耐心等待...");
        this.pwdLogin();
      }
    },
    
    /**
     * 微信登录主方法
     * 进行协议勾选验证并触发微信登录流程
     */
    async handleWxLogin(e) {
      if (!this.agreementChecked) {
        this.$modal.msgError("请阅读并同意用户协议和隐私协议");
        return;
      }
      
      this.$modal.loading("正在获取微信授权...");
      // 获取用户信息 - 必须在点击事件中调用
      uni.getUserProfile({
        desc: "用于完善会员资料",
        success: (infoRes) => {
          console.log("用户信息:", infoRes);
          // 获取微信登录凭证
          uni.login({
            provider: "weixin",
            success: (loginRes) => {
              console.log("微信登录code:", loginRes.code);
              // 调用后端微信登录接口
              this.wxLogin(loginRes.code, infoRes.userInfo);
            },
            fail: (err) => {
              this.$modal.closeLoading();
              this.$modal.msgError("微信登录失败");
              console.error("微信登录失败:", err);
            },
          });
        },
        fail: (err) => {
          this.$modal.closeLoading();
          if (err.errMsg.includes("cancel")) {
            this.$modal.msgError("您已取消授权");
          } else {
            this.$modal.msgError("获取用户信息失败");
          }
          console.error("获取用户信息失败:", err);
        },
      });
    },

    /**
     * 密码登录核心逻辑
     * 调用store中的Login action处理登录请求
     */
    async pwdLogin() {
      this.$store
        .dispatch("Login", this.loginForm)
        .then(() => {
          this.$modal.closeLoading();
          this.loginSuccess();
        })
        .catch(() => {
          if (this.captchaEnabled) {
            this.getCode(); // 登录失败时刷新验证码
          }
        });
    },

    /**
     * 登录成功后的处理函数
     * 获取用户信息并跳转到首页
     */
    loginSuccess(result) {
      // 设置用户信息
      this.$store.dispatch("GetInfo").then((res) => {
        this.$tab.reLaunch("/pages/index");
      });
    },

    // #ifdef MP-WEIXIN
    /**
     * 微信登录处理函数 - 仅在微信小程序环境可用
     * 必须通过用户点击按钮触发
     */
    handleWxLogin(e) {
      this.$modal.loading("正在获取微信授权...");
      // 获取用户信息 - 必须在点击事件中调用
      uni.getUserProfile({
        desc: "用于完善会员资料",
        success: (infoRes) => {
          console.log("用户信息:", infoRes);
          // 获取微信登录凭证
          uni.login({
            provider: "weixin",
            success: (loginRes) => {
              console.log("微信登录code:", loginRes.code);
              // 调用后端微信登录接口
              this.wxLogin(loginRes.code, infoRes.userInfo);
            },
            fail: (err) => {
              this.$modal.closeLoading();
              this.$modal.msgError("微信登录失败");
              console.error("微信登录失败:", err);
            },
          });
        },
        fail: (err) => {
          this.$modal.closeLoading();
          if (err.errMsg.includes("cancel")) {
            this.$modal.msgError("您已取消授权");
          } else {
            this.$modal.msgError("获取用户信息失败");
          }
          console.error("获取用户信息失败:", err);
        },
      });
    },

    /**
     * 调用微信登录接口
     * 将微信登录凭证和用户信息发送到后端进行验证
     */
    async wxLogin(code, userInfo) {
      this.$store
        .dispatch("WxLogin", {
          code: code, // 微信登录code
          nickName: userInfo.nickName, // 用户昵称
          avatarUrl: userInfo.avatarUrl, // 用户头像
          gender: userInfo.gender, // 用户性别
        })
        .then(() => {
          this.$modal.closeLoading();
          this.loginSuccess();
        })
        .catch((error) => {
          this.$modal.closeLoading();
          this.$modal.msgError(error.msg || "微信登录失败");
        });
    },
    // #endif
  },
};
</script>

<style lang="scss" scoped>
// 页面基础样式设置
page {
  background: linear-gradient(180deg, #e8f5e9 0%, #f1f8e9 100%); // 渐变背景色
  min-height: 100vh; // 确保页面高度占满屏幕
}

// 登录页面主容器样式
.normal-login-container {
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* 装饰性背景元素样式 */
.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; // 使背景元素不响应鼠标事件
  z-index: 0; // 置于底层
}

// 装饰性叶子样式
.decoration-leaf {
  position: absolute;
  font-size: 60rpx;
  opacity: 0.15;
  color: #4caf50;
  animation: float 6s ease-in-out infinite; // 浮动动画效果
}

// 叶子位置和动画延迟设置
.decoration-leaf-1 {
  top: 15%;
  right: 10%;
  animation-delay: 0s;
}

.decoration-leaf-2 {
  top: 60%;
  left: 8%;
  font-size: 45rpx;
  animation-delay: 2s;
}

.decoration-leaf-3 {
  bottom: 20%;
  right: 15%;
  font-size: 50rpx;
  animation-delay: 4s;
}

// 装饰性圆圈样式
.decoration-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(76, 175, 80, 0.08);
  animation: pulse 4s ease-in-out infinite; // 脉冲动画效果
}

// 圆圈位置和动画延迟设置
.decoration-circle-1 {
  width: 120rpx;
  height: 120rpx;
  top: 25%;
  left: 15%;
  animation-delay: 1s;
}

.decoration-circle-2 {
  width: 80rpx;
  height: 80rpx;
  bottom: 30%;
  left: 75%;
  animation-delay: 3s;
}

// 浮动动画定义
@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20rpx) rotate(5deg);
  }
}

// 脉冲动画定义
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.08;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.15;
  }
}

// 登录页面内部组件样式
.normal-login-container {
  // Logo区域样式
  .logo-content {
    width: 100%;
    font-size: 21px;
    text-align: center;
    padding-top: 15%;
    position: relative;
    z-index: 1; // 置于装饰背景之上

    image {
      width: 150px;
      height: 50px;
    }

    .title {
      margin-left: 10px;
      font-size: 48rpx;
      font-weight: bold;
      color: #2e7d32;
      margin-top: 20rpx;
    }
  }

  // 登录方式选项卡样式
  .login-tabs {
    width: 80%;
    margin: 40rpx auto 0;
    position: relative;
    z-index: 1;

    .tab-list {
      display: flex;
      border-bottom: 1px solid #e5e5e5;

      .tab-item {
        flex: 1;
        text-align: center;
        padding: 20rpx 0;
        position: relative;
        color: #666;
        font-size: 32rpx;
        transition: all 0.3s;

        // 选中状态样式
        &.active {
          color: #2e7d32;
          font-weight: 500;

          // 选中下划线效果
          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60rpx;
            height: 4rpx;
            background: #4caf50;
            border-radius: 2rpx;
          }
        }
      }
    }
  }

  // 登录表单内容区域样式
  .login-form-content {
    text-align: center;
    margin: 20px auto;
    margin-top: 40rpx;
    width: 80%;
    background: rgba(255, 255, 255, 0.95); // 半透明背景
    border-radius: 20rpx;
    padding: 40rpx 30rpx;
    box-shadow: 0 8rpx 32rpx rgba(76, 175, 80, 0.15); // 阴影效果
    backdrop-filter: blur(10px); // 背景模糊效果
    position: relative;
    z-index: 1;

    // 微信登录界面样式
    .wechat-login-content {
      padding-top: 60rpx;

      .wechat-tips {
        text-align: center;
        margin-bottom: 60rpx;

        .tips-text {
          display: block;
          font-size: 36rpx;
          color: #333;
          margin-bottom: 20rpx;
        }

        .tips-desc {
          display: block;
          font-size: 28rpx;
          color: #999;
        }
      }

      .wechat-icon {
        text-align: center;
        margin-bottom: 60rpx;

        .cuIcon-weixin {
          font-size: 120rpx;
          color: #07c160;
        }
      }
    }

    // 输入框样式
    .input-item {
      margin: 30rpx auto;
      background-color: rgba(248, 250, 252, 0.9);
      height: 45px;
      border-radius: 25px;
      border: 2rpx solid rgba(76, 175, 80, 0.1);
      transition: all 0.3s ease;

      // 输入框获取焦点时的样式变化
      &:focus-within {
        border-color: rgba(76, 175, 80, 0.3);
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.1);
      }

      .icon {
        font-size: 38rpx;
        margin-left: 20rpx;
        color: #4caf50;
      }

      .input {
        width: 100%;
        font-size: 14px;
        line-height: 20px;
        text-align: left;
        padding-left: 15px;
        color: #333;
      }
    }

    // 登录按钮样式
    .login-btn {
      margin-top: 40rpx;
      height: 90rpx;
      font-size: 32rpx;
      font-weight: 500;
      border-radius: 45rpx;
      box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.3);
      transition: all 0.3s ease;

      // 按钮按下时的样式变化
      &:active {
        transform: scale(0.98);
        box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.2);
      }
    }

    // 注册链接样式
    .reg {
      margin-top: 15px;
    }

    // 协议文本样式
    .xieyi {
      color: #333;
      margin-top: 20px;
    }
    
    // 复选框容器样式
    .checkbox-container {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
    }
    
    // 复选框样式
    .checkbox {
      width: 24rpx;
      height: 24rpx;
      border: 2rpx solid #ccc;
      border-radius: 4rpx;
      margin-right: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
    }
    
    // 复选框选中样式
    .checkbox.checked {
      background-color: #4caf50;
      border-color: #4caf50;
    }
    
    // 复选框选中图标样式
    .checkbox .icon-check {
      color: white;
      font-size: 20rpx;
    }

    // 验证码图片样式
    .login-code {
      height: 38px;
      float: right;

      .login-code-img {
        height: 38px;
        position: absolute;
        margin-left: 10px;
        width: 200rpx;
      }
    }
  }
}
</style>
